// TODO 重写 render 模块 现在版本只能渲染一个点
const charts_handler = {
    /**
     * 获取某个军队点的所有角色
     *
     * @param id 点的name (不存在 `_`)
     */
    getCharacters(id) {
        let JSON = render_mapper.web_json;
        console.log("-----------------------------------------------",JSON)
        for (let key  in JSON) {
            let val = JSON[key];
            let army = val["army"];

            if (army === undefined) continue

            for (let [characters, point] of army){
                let [x,y] = point;
                let name = (y - 1) * 30 + x;
                console.log("------------", name , '|' , id)
                if (name === id){
                    return characters
                }
            }
        }
        return [];
    }

}
const render_mapper = {
    web_json: {
        "青兰": {
            'city': [["青兰主城", [5, 14]]],
            'army': [[["卷零", "洛斯"], [7, 12]]],
            'block': [[1, 1], [1, 4]]
        },
        "龙城": {
            'city': [["龙城主城", [17, 12]]],
            'army': [[["冰泉涛", "霜冰语"], [7, 18]], [["火龙舞", "木灵石"], [4, 18]]],
            'block': [[7, 5], [30, 7]]
        }
    },
    pow_detail: {
        "青兰": `君至青兰,  八荒 闲转。云雾幽丽，林茂水暖，\n
            民富天佑，国运神通。四方环游, 气韵神闲。\n
            苏龙断崖可摘星，万里三溪通天际。\n
            曲有安平千人传，文有天云万人品。\n
            难度：A 初始武将: 洛斯、卷零
            `,

        "极南": "君至极南兮，飞雪似锦絮。\n" +
            "千里尽银装，万里消兽禽。\n" +
            "极南有好山，山入白云端。\n" +
            "君可尽此峰，俯首做远瞻。\n" +
            "极南有好水，流水急湍湍。\n" +
            "日夜不得息，但因极南寒。\n",

        "歧名": "西泽西，乃岐名. 云重云，茂群林.\n" +
            "天起龙吟，地生麒麟。\n" +
            "不谓人间仙境，又何寻，此方之天地？\n",

        "龙城": "飞龙游苍穹，挥云生狂雷。\n" +
            "弹指天地浑，抖落云几层。\n",

        "太云": "此乃太云，云雾缭缭，",

        "裂谷塔": "南至裂谷塔，巍巍重岩嶂。\n" +
            "曜日除莽云，坤石妆群狼。\n" +
            "落日飞鸟尽，林野恶兽藏。\n" +
            "幽深不知底，群林韫毒瘴。\n",

        "沙弥": "???",

        "西泽": '西泽西泽，君臣不和.\n' +
            '似明不明，无才无德.\n' +
            '难有贤臣，不宜重用.\n' +
            '迫而背弃，自青兰行.\n' +
            '只愿唇亡，不知存亡.\n' +
            '哀哉悲哉，静待国殇.\n',

        "斯拉丹": "酒祭上古神，神颜现天威。诗篇传千古，信仰铸忠诚。",

        "坛安": '???'
    },
    lst_power: [
        "青兰",
        "极南",
        "歧名",
        "龙城",
        "太云",
        "裂谷塔",
        "沙弥",
        "西泽",
        "斯拉丹",
        "坛安"
    ],
    config_power_color: {
        "青兰": "#26ff12",
        "极南": "#00fff1",
        "歧名": "#b400ff",
        "龙城": "#f10433",
        "太云": "#FFF700",
        "裂谷塔": "#FB62F3",
        "沙弥": "#0070B4",
        "西泽": '#003CFF',
        "斯拉丹": "#950",
        "坛安": '#008100'
    },

    /**
     * 某点是否为特殊点
     */
    is_special_point(json, id) {
        return this.is_aram(json, id).flag === true || this.is_city(json, id).flag === true
    },
    /**
     * 判断某点在地图数据 json 中是否为军队
     * @param json
     * @param id
     */
    is_aram(json, id) {
        for (let i of json['army']) {
            let [x, y] = i[2];
            let _name = (y - 1) * 30 + x;
            console.log("id", id);
            console.log("_name", _name);
            if (_name == id) {
                return {
                    flag: true,
                    chars: i[1], // 角色
                    power: i[0], // 势力
                }
            }
        }
        return {
            flag: false
        }
    },
    /**
     *
     * 判断某点在地图数据 json 中是否为城市
     * @param
     * @returns
     */
    is_city(json, id) {
        for (let i of json['city']) {
            let _name = i[1];

            if (_name == id) {
                return {
                    flag: true,
                    power: i[0], // 势力
                }
            }
        }
        return {
            flag: false
        }
    },
    /**
     * 将 服务器传来的 json 数据进行渲染，并转化为我们的地图数据
     * @param json
     * @returns 返回我们的地图数据
     */
    render(json) {
        let city = this.render_city(json) // 渲染城市
        let army = this.render_army(json) // 渲染军队
        let block = this.render_block(json) // 渲染有势力的空白页


        console.log("-> ", {
            army, city, block
        });

        return {
            army, city, block
        }
    },

    /**
     * 利用传来的webjson进行渲染城市
     *
     * @param json webjson 如果不传入默认使用 this.web_json
     *
     * @returns {Array}
     * 返回存在城市的所有单元点 里面的结构是 [ [青兰, [2,3]], [青兰, [2,4] ... ]
     */
    render_city(json) {
        json = json === undefined ? this.web_json : json;
        let has_city_point = [];

        for (let i of this.lst_power) {  // 遍历势力
            let mapper = this.web_json[i];
            if (mapper === undefined) continue // 当前势力没有任何城市存在在地图上
            let citys = mapper['city'];
            for (let j of citys) {
                let [city_name, [city_x, city_y]] = j;
                let name = (city_y - 1) * 30 + city_x;
                has_city_point.push([i, name]);
                let element = document.getElementsByName(`_${name}`)[0];
                element.style.backgroundColor = this.config_power_color[i];
                element.classList.add("city-point");
            }
        }

        return has_city_point;
    },


    /**
     * 利用传来的webjson进行渲染军队
     *
     * @param json webjson 如果不传入默认使用 this.web_json
     *
     * @returns {Array}
     * 返回存在城市的所有单元点 里面的结构是 [[青兰, ["xxx", "xx"], [2,3]], [青兰, ["",""], [2,4] ... ]
     */
    render_army(json) {
        json = json === undefined ? this.web_json : json;
        let armies = [];

        for (let powername of this.lst_power) {
            let army_list = json[powername];
            if (army_list === undefined) continue
            army_list = army_list["army"];
            for (let army of army_list) {
                let [army_characters, [x, y]] = army;
                armies.push([powername, army_characters, [x, y]]);
                let name_sign = army_characters[0][0];
                let name = (y - 1) * 30 + x;
                let element = document.getElementsByName(`_${name}`)[0];
                element.style.backgroundColor = this.config_power_color[powername];
                element.innerText = name_sign;
                element.classList.add("army-point");
            }
        }
        return armies;
    },

    /**
     * 利用传来的webjson进行渲染军队
     *
     * @param json webjson 如果不传入默认使用 this.web_json
     *
     * @returns {Array}
     * 返回存在城市的所有单元点 里面的结构是 [ [青兰, [2,3]], [青兰, [2,4] ... ]
     */
    render_block(json) {
        json = json === undefined ? this.web_json : json;
        let block = []

        for (let powername of this.lst_power) {
            let blocks = json[powername];
            if (blocks === undefined) continue
            for (let point of blocks["block"]) {
                let [x, y] = point;
                let name = (y - 1) * 30 + x;
                let element = document.getElementsByName(`_${name}`)[0];
                console.log(`_${name}`);
                block.push([powername, [x, y]]);
                element.style.backgroundColor = this.config_power_color[powername];
            }
        }
        return block;
    },

    charts_handler: charts_handler
}

export default render_mapper